<!DOCTYPE html>
<html>
<head>
    <title>模板编辑</title>
    <link href="__PLUGIN_TMPL__/public/assets/layui/css/layui.css" rel="stylesheet" type="text/css">
    <link href="__PLUGIN_TMPL__/public/assets/layui/css/backend.min.css" rel="stylesheet" type="text/css">
    <include file='public/head'>
        <style>
            table th, table td{text-align: center;}
            .ml-10 { margin-left: 10px; }
			.layui-icon{font-size: 14px !important;}
			.layui-form-label{ width: auto;}
			.layui-btn.layui-btn-sm .fa{ font-size: 14px !important;}
			.mr4{ margin-right: 4px;}
			.layui-form-item{ margin-bottom: 0px;}
			.row{ margin: 0 !important;}
			.form-horizontal .form-group { margin: 0 0 15px 0}
        </style>
</head>
<body>
	<div class="wrap js-check-wrap" style="padding: 20px 20px 0px 20px;">
	    <ul class="nav nav-tabs">
	        <php> $currentTab = 13 ;</php>
	        <include file="public/nav" />
	    </ul>
	</div>
    <div id="main" role="main">
        <div class="tab-content tab-addtabs">
			<div id="content">
				<div class="row">
					<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
						<div class="content">
							<form id="edit-form" class="form-horizontal nice-validator n-default n-bootstrap">
								<div class="form-group">
									<label class="control-label col-xs-12 col-sm-2">模板名称</label>
									<div class="col-xs-12 col-sm-8">
										<input type="text" name="template_name" class="form-control" value="{$module.template_name|default=''}" required placeholder="请填写模板名称!">
										<div id="show-status-name" style="line-height: 18px;"></div>
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-xs-12 col-sm-2">选择模块</label>
									<div class="col-xs-12 col-sm-8">
										<select class="form-control" name="name" required id="select-module-list" placeholder="请选择模块">
											<option value=''>请选择模块</option>
											<volist name ="moduleList" id="vo">
												<option value='{$vo.name}' data-v="{:implode(',',$vo.version)}" data-t="{$vo.title}" <?php if( isset( $module['name']) && $vo['name'] == $module['name']){ $currentVersion = $vo['version'];  echo 'selected'; } ?> >{$vo.name}&{$vo.title}</option>
											</volist>
										</select>
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-xs-12 col-sm-2">模板分类</label>
									<div class="col-xs-12 col-sm-8">
										<input text="text" readonly class="form-control" value="{$module.type|default="-"}" />
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-xs-12 col-sm-2">选择模块版本:</label>
									<div class="col-xs-12 col-sm-8">
										<select class="form-control" name="version" required version="" id="select-module-version" placeholder="请选择模块版本">
											<if condition='isset($currentVersion)'>
												<?php
													foreach( $currentVersion as $key => $value ){
														$selected = '';
														if( $value == $module['version'] ) $selected='selected';
														echo '<option value="'.$value.'"  '.$selected.'>'.$value.'</option>';
													}
												?>
											<else/>
												<option value="">-</option>
											</if>
											
										</select>
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-xs-12 col-sm-2">模板简介:</label>
									<div class="col-xs-12 col-sm-8">
										<input class="form-control"   name="describe" type="text" required  value="{$module.describe|default=''}" placeholder="请填写模块简介信息" required>
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-xs-12 col-sm-2">模板功能介绍:</label>
									<div class="col-xs-12 col-sm-8">
										<textarea class="form-control"  rows='3' name="introduce" required  placeholder="请填写模功能介绍" required>{$module.introduce|default=''}</textarea>
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-xs-12 col-sm-2">温馨提醒:</label>
									<div class="col-xs-12 col-sm-8">
										<textarea class="form-control"  rows='3' name="warning" required   placeholder="请填写温馨提醒" required>{$module.warning|default=''}</textarea>
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-xs-12 col-sm-2">价格:</label>
									<div class="col-xs-12 col-sm-8">
										<input type="number" name="price" class="form-control" required value="{$module.price|default='0'}" placeholder="请填写价格" />
									</div>
								</div>
								<!-- 思维导图url开始 -->
								<div class="form-group">
									<label for="c-keywords" class="control-label col-xs-12 col-sm-2">思维导图URL:</label>
									<div class="col-xs-12 col-sm-8">
										<input id="image_info" class="form-control" size="35" name="mind_map_url" type="text" value="{$module.mind_map_url|default=''}" placeholder="填写思维导图URL" required >
									</div>
								</div>
								
								<!-- 思维导图url结束 -->		
								<!-- 原型图url开始 -->
								<div class="form-group">
									<label for="c-keywords" class="control-label col-xs-12 col-sm-2">原型图URL:</label>
									<div class="col-xs-12 col-sm-8">
										<input id="image_info" class="form-control" size="35" name="flow_chart_url" type="text" value="{$module.flow_chart_url|default=''}" placeholder="填写原型图URL地址" required >
									</div>
								</div>
								<!-- 原型图url结束 -->	

								<!-- ui设计图url开始 -->
								<div class="form-group">
									<label for="c-keywords" class="control-label col-xs-12 col-sm-2">UI设计图URL:</label>
									<div class="col-xs-12 col-sm-8">
										<input id="image_info" class="form-control" size="35" name="ui_url" type="text" value="{$module.ui_url|default=''}" placeholder="填写UI设计图URL地址" required >
									</div>
								</div>
								
								<!-- ui设计图url结束 -->		

								<if condition="!empty($module['id'])">

									<div class="form-group">
										<label class="control-label col-xs-12 col-sm-2">思维导图:</label>
										<div class="col-xs-12 col-sm-8">
											<div class="input-group">
												<input name="mind_map" type="text" class="form-control" readonly value="{$module.mind_map|default=''}"  placeholder="请上传思维导图文件">
												<div class="input-group-addon no-border no-padding">
													<span style="position: relative;">
														<button disabled type="button" class="btn btn-danger plupload" style="position: relative; z-index: 1;" id="mindMap"><i class="fa fa-upload"></i> 上传思维导图文件</button>
													</span>
													<!-- <span>
														<button type="button" class="btn btn-primary fachoose"><i class="fa fa-list"></i> 选择</button>
													</span> -->
												</div>
												<span class="msg-box n-right"></span>
											</div>
											<ul class="row list-inline plupload-preview" id="image_list"></ul>
										</div>
									</div>

									<div class="form-group">
										<label class="control-label col-xs-12 col-sm-2">原型图:</label>
										<div class="col-xs-12 col-sm-8">
											<div class="input-group">
												<input name="flow_chart" type="text" class="form-control" readonly value="{$module.flow_chart|default=''}"  placeholder="请上传原型图文件" >
												<div class="input-group-addon no-border no-padding">
													<span style="position: relative;">
														<button disabled type="button" class="btn btn-danger plupload" style="position: relative; z-index: 1;" id="flowChart"><i class="fa fa-upload"></i> 原型图</button>
													</span>
													<!-- <span>
														<button type="button" class="btn btn-primary fachoose"><i class="fa fa-list"></i> 选择</button>
													</span> -->
												</div>
												<span class="msg-box n-right"></span>
											</div>
											<ul class="row list-inline plupload-preview" id="image_list"></ul>
										</div>
									</div>
									<div class="form-group">
										<label class="control-label col-xs-12 col-sm-2">UI设计图:</label>
										<div class="col-xs-12 col-sm-8">
											<div class="input-group">
												<input name="ui" type="text" class="form-control" readonly value="{$module.ui|default=''}"  placeholder="请上传UI设计图文件" >
												<div class="input-group-addon no-border no-padding">
													<span style="position: relative;">
														<button disabled type="button" class="btn btn-danger plupload" style="position: relative; z-index: 1;" id="uiMap"><i class="fa fa-upload"></i> 上传UI设计图文件</button>
													</span>
													<!-- <span>
														<button type="button" class="btn btn-primary fachoose"><i class="fa fa-list"></i> 选择</button>
													</span> -->
												</div>
												<span class="msg-box n-right"></span>
											</div>
											<ul class="row list-inline plupload-preview" id="image_list"></ul>
										</div>
									</div>

									<div class="form-group">
										<label class="control-label col-xs-12 col-sm-2">上传模板压缩包(.zip格式):</label>
										<div class="col-xs-12 col-sm-8">
											<div class="input-group">
												<input name="resource" type="text" class="form-control" readonly value="{$module.resource|default=''}"  placeholder="请上传模板压缩包文件">
												<div class="input-group-addon no-border no-padding">
													<span style="position: relative;">
														<button disabled type="button" class="btn btn-danger plupload" style="position: relative; z-index: 1;" id="resource"><i class="fa fa-upload"></i> 上传模板源码</button>
													</span>
													<!-- <span>
														<button type="button" class="btn btn-primary fachoose"><i class="fa fa-list"></i> 选择</button>
													</span> -->
												</div>
												<span class="msg-box n-right"></span>
											</div>
											<ul class="row list-inline plupload-preview" id="image_list"></ul>
										</div>
									</div>
									<!--预览图开始  -->
									<div class="form-group">
										<label class="control-label col-xs-12 col-sm-2">预览图:</label>
										<div class="col-xs-12 col-sm-8">
											<div class="input-group">
												<div class="input-group-addon no-border no-padding">
													<span style="position: relative;">
														<input type="hidden" name="preview" value="{$module.preview|default=''}" placeholder="请上传模板预览图" />
														
													</span>
												</div>
												<span class="msg-box n-right"></span>
											</div>
											<ul class="row list-inline plupload-preview" id="images_list">
												<?php $extra = cmf_get_extra_dir(); $extra = empty( $extra )? '':$extra.'/' ; ?>
												<volist name="previewList" id="vo">
													<li class="col-xs-3"><a href="/<?php echo $extra.$previewList[$key] ; ?>" data-url="#" target="_blank" class="thumbnail"><img src="/<?php echo $extra.$previewList[$key] ; ?>" alt="00" class="img-responsive"></a></li>
												</volist>
											</ul>
										</div>
									</div>
									<!--预览图结束  -->
								</if>
								</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
    <include file='public/scripts'>
	<script src="__PLUGIN_TMPL__/public/assets/layui/layui.all.js"></script>
	<script src="__STATIC__/js/custom/custom.js"></script>
<script type="text/javascript">

	//多图容器
	var imgTmp = <?php echo json_encode($previewList);?>;
	var method = {};
	$(function(){
		;!function(){
			var layer = layui.layer
			,form = layui.form
			,$ = layui.jquery
		    ,upload = layui.upload;

		    //上传模块压缩包文件
			upload.render({ 
				elem: '#resource'
				,url: "{:cmf_plugin_url('Appmarket://Template/upResource')}?id={$module.id|default=0}"
				,accept: 'file' //普通文件
				,exts: "zip" //只允许上传压缩文件
				,done: function( data ){
					var icon  = ( data.code == 200 ) ? 1 : 5;
					layer.msg( data.message , { icon: icon } );
					if( icon == 1 ){
						$('input[name=resource]').val( data.data );
					}			
				}
			});

			$('.plupload-preview').on('click','.btn-trash',function(){
				if($(this).parent('#image_list')){
					$('#image_list li').remove();
					$('#image_info').val('');
				}else{
					$(this).parent('li');
				}
				
			})			
			//多图片上传
		    upload.render({
				elem: '#images_upload'
				,url: '{:cmf_plugin_url("Appmarket://Template/preview")}?id={$module.id|default=0}'
				,exts:'jpg|bmp|png|gif|jpeg'
				,multiple: true
				,before: function(obj){
				  //预读本地文件示例，不支持ie8
				  obj.preview(function(index, file, result){
					  $('#images_list').append('<li class="col-xs-3"><a href="" data-url="#" target="_blank" class="thumbnail"><img src="'+result+'" alt="'+ file.name +'" class="img-responsive"></a><a href="javascript:;"  class="btn btn-danger btn-xs btn-trash upload-delete-btn"><i class="fa fa-trash"></i></a></li>')
				  });
				}
				,done: function(res){
				 	//上传完毕
					if(res.code!=200){
					  	$('#images_list').html('');
					  	$('input[name=preview]').val('');
					    return layer.msg(res.message);
					}else{
						//成功后的操作
					  	imgTmp.push(res.data);
					  	$('input[name=preview]').val(imgTmp);
					}
				}
		    });


		    //上传ui图
			upload.render({ 
				elem: '#uiMap'
				,url: "{:cmf_plugin_url('Appmarket://Template/uiMap')}?id={$module.id|default=0}"
				,accept: 'file' //普通文件
				,exts: "zip" //只允许上传压缩文件
				,done: function( res ){
					showMessage( res , 'ui' , '#uiMap' );				
				}
			});
			//上传思维导图
			upload.render({ 
				elem: '#mindMap'
				,url: "{:cmf_plugin_url('Appmarket://Template/mindMap')}?id={$module.id|default=0}"
				,accept: 'file' //普通文件
				,exts: "zip" //只允许上传压缩文件
				,done: function( res ){
					showMessage( res , 'mind_map' , '#mindMap' );				
				}
			});
			//上传原型图
			upload.render({ 
				elem: '#flowChart'
				,url: "{:cmf_plugin_url('Appmarket://Template/flowChart')}?id={$module.id|default=0}"
				,accept: 'file' //普通文件
				,exts: "zip" //只允许上传压缩文件
				,done: function( res ){
					showMessage( res , 'flow_chart' , '#flowChart' );				
				}
			});

			var showMessage = function( data , inputName , id ){
				var icon  = (data.code == 200 )? 1: 5;
				layer.msg( data.message , { icon: icon });
				if( icon == 1 ){
					$('input[name='+inputName+']').val(data.data);
				}
			}

		}();
	})

	//移除图片
	$(document).on( 'click' , '.upload-delete-btn' , function(){
		var _this = $(this);
		var img = _this.parents('li').find('img');
		var index = $('.img-responsive').index(img);
		var file = imgTmp[index];
		imgTmp.splice(index,1);
		_this.parents('li').remove();
		$('input[name=preview]').val(imgTmp);
		$.post( "{:cmf_plugin_url('Appmarket://Template/trashFile')}" , { file : file , id: $('#audit-id').val() , preview : $('input[name=preview]').val()  } , function(data){
		} , 'json');
	});
</script>

<script type="text/javascript">
	//选择模块
	$('#select-module-list').on('change' , function(){
		let option = $(this).find('option:selected');
		let versions = option.data('v');
		let arr = versions.split(',');
		var op = '';
		for( var i = 0 ; i < arr.length; i++ ){
			op += '<option value="'+arr[i]+'">'+arr[i]+'</option>';
		}
		if( op == '' ){
			op = '<option value="">请选择模块</option>';
		}
		$( '#select-module-version' ).html(op);
	});

	//检查模板名称是否重复
	/*var checkTemplateName = function( _this ){
		let value = $(_this).val();
		$('#show-status-name').html('');
		if( $.trim( value ).length == 0 ){
			var span = '<span style="color:red;">模板名称不能为空!</span>';
			$('#show-status-name').html(span);
		}

		//检查
		$.post( '{:cmf_plugin_url("Appmarket://Template/checkTemplateName")}' , {name:value} , function(data){
			var span = '<span style="'+( (data.status=='success') ? 'color:green;' : 'color:red;' )+'">'+data.message+'</span>';
			$('#show-status-name').html(span);
		},'json');
	}*/

	//获取表单数据
	var formData = function( _this , type ){
		var formData = $($('#edit-form').serializeArray());
		var tmp = {};
		var message = '请将信息填写完整再提交!';
		var flag = true;
		$.each(formData,function( index , value ){
			$('[name='+value.name+']').css('border','');
			if( $.trim( value.value ) == ""  &&  ( $('[name='+value.name+']').attr('required') != undefined )  ){
				$('[name='+value.name+']').css('border','1px solid red');
				flag = false;
				message = $('[name='+value.name+']').attr('placeholder');
				return false;
			}
			//提交审核的时候必须校验
			if( type == "audit" ){
				//思维导图文件上传
				if( $.trim( $('[name=mind_map]').val() ) == ''  ){
					layer.msg( $('[name=mind_map]').attr('placeholder') );
					return false;
				}		
				//原型图文件上传	
				if( $.trim( $('[name=flow_chart]').val() ) == ''  ){
					layer.msg( $('[name=flow_chart]').attr('placeholder') );
					return false;
				}
				//ui图	
				if( $.trim( $('[name=ui]').val() ) == ''  ){
					layer.msg( $('[name=ui]').attr('placeholder') );
					return false;
				}
				//模板源文件
				if( $.trim( $('[name=resource]').val() ) == ''  ){
					layer.msg( $('[name=resource]').attr('placeholder') );
					return false;
				}
				//预览图preview
				if( $.trim( $('[name=preview]').val() ) == ''  ){
					layer.msg( $('[name=preview]').attr('placeholder') );
					return false;
				}
			}
			tmp [ value.name ] = value.value;
		});
		console.log( '提交数据:' , tmp );
		if( !flag ){
			layer.msg( message );
			return false;
		}
		tmp ['title'] = $('[name=name] option:selected').data('t');
		let templateId = '{$module.id|default=0}';
		let url = '{:cmf_plugin_url("Appmarket://Template/publishPost")}';
		$.post( url , {data:tmp , type : type , id:templateId} , function(data){
			let icon = (data.code == 200 ) ? 1 : 5 ;
			layer.msg( data.message , {icon:icon} );
			if( icon == 1 ){
				setTimeout(function(){
					window.location.href = data.data;
				},1200);
			}
		},'json');
	}
</script>
</body>
</html>

